import { createRouter, createWebHashHistory } from 'vue-router'

//导入组件
import home from './components/router/home.vue'
import about from './components/router/about.vue'

import one from './components/router/child/one.vue'
import two from './components/router/child/two.vue'
import movie from './components/router/dymic/movie.vue'
import movieinfo from './components/router/dymic/movieinfo.vue'

import { compile } from 'vue'

//创建路由实例
const router = createRouter({
    //路由被激活时，显示的样式，可以自定义一个样式
    linkActiveClass: 'router-active',

    history: createWebHashHistory(),
    routes: [
        // 可以重定向
        { path: '/', redirect: 'about' },
        { path: '/home', component: home },
        {
            path: '/about',
            // component: about,
            redirect: '/about/one',
            children: [{
                //当使用children属性定义子路由匹配规则时，
                //子路由的path属性前不要带“/”，否则会永远以根路径开始请求。
                path: 'one',
                component: one,
            },
            {
                path: 'two',
                component: two,
            }]

        }, {
            path: '/movie',
            component: movie,
            children: [
                {
                    path: ':id',
                    component: movieinfo,
                    props:true
                },
            ]
        }
    ]
})

//懒加载的方式
//   const router = createRouter({
//     history: createWebHashHistory(),
//     routes: [
//       { path: '/home', component: () => import('./components/Home.vue') },
//       { path: '/about', component: () => import('./components/About.vue') },
//     ]
//   })


export default router;